import { SliderDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.HooksPackage);

# Mantine hooks

[![npm](https://img.shields.io/npm/dm/@mantine/hooks)](https://www.npmjs.com/package/@mantine/hooks)

[@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks) package
provides more than 70 hooks to build custom components. `@mantine/hooks`
package is used internally in most of other `@mantine/*` packages –
it is required to be installed in your project to use Mantine components.

## Installation

<InstallScript packages="@mantine/hooks" />

## Usage

`@mantine/hooks` package can be used in any web React application, state
management hooks (like [use-pagination](/hooks/use-pagination) or [use-queue](/hooks/use-queue))
are also compatible with React Native. The package can be used even if you
do not use Mantine components or other Mantine libraries – it is standalone
and does not have any dependencies except React.

Example of using [use-move](/hooks/use-move) hook to create a custom slider:

<Demo data={SliderDemos.customSlider} demoProps={{ defaultExpanded: false }} />

## License

MIT
